import React, { Component } from 'react';
import "../styles/Vip.scss"
import { NavBar, Space, JumboTabs } from 'antd-mobile'
import { SendOutline  } from 'antd-mobile-icons'

class Vip extends Component {
    constructor(props) {
        super(props);
        this.state = {
            right: (
                <div style={{ fontSize: 20 }}>
                    <Space style={{ '--gap': '16px' }}>
                        <SendOutline />
                    </Space>
                </div>
            ),
            equitylist:[
                {
                    pic:'https://img0.baidu.com/it/u=4095097841,2725694827&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=350',
                    name:'大额优惠卷',
                    equity:'每单省￥20.0'
                },
                {
                    pic:'https://img0.baidu.com/it/u=4095097841,2725694827&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=350',
                    name:'大额优惠卷',
                    equity:'每单省￥20.0'
                },
                {
                    pic:'https://img0.baidu.com/it/u=4095097841,2725694827&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=350',
                    name:'大额优惠卷',
                    equity:'每单省￥20.0'
                },
                {
                    pic:'https://img0.baidu.com/it/u=4095097841,2725694827&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=350',
                    name:'大额优惠卷',
                    equity:'每单省￥20.0'
                },
                {
                    pic:'https://img0.baidu.com/it/u=4095097841,2725694827&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=350',
                    name:'大额优惠卷',
                    equity:'每单省￥20.0'
                },
                {
                    pic:'https://img0.baidu.com/it/u=4095097841,2725694827&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=350',
                    name:'大额优惠卷',
                    equity:'每单省￥20.0'
                },
                {
                    pic:'https://img0.baidu.com/it/u=4095097841,2725694827&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=350',
                    name:'大额优惠卷',
                    equity:'每单省￥20.0'
                },
                {
                    pic:'https://img0.baidu.com/it/u=4095097841,2725694827&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=350',
                    name:'大额优惠卷',
                    equity:'每单省￥20.0'
                },
            ],
            coupones:[
                {
                    pic:'https://picnew13.photophoto.cn/20190315/lansedegouwuquanmiankoutu-32318748_1.jpg'
                },
                {
                    pic:'https://picnew13.photophoto.cn/20190315/lansedegouwuquanmiankoutu-32318748_1.jpg'
                },
                {
                    pic:'https://picnew13.photophoto.cn/20190315/lansedegouwuquanmiankoutu-32318748_1.jpg'
                },
                {
                    pic:'https://picnew13.photophoto.cn/20190315/lansedegouwuquanmiankoutu-32318748_1.jpg'
                },
            ]
        }
    }
    render() {
        return (
            <div className='vip'>
                <NavBar className='navbar' right={this.state.right} onBack={() => { this.props.history.go(-1) }}>会员中心</NavBar>
                <div className="vipcard">
                    <div className="title">VIP卡</div>
                    <div className="infro">
                        <p>开通预计省</p>
                        <div className="bottom">
                            <div className="money">
                                <span className="s1">￥</span>
                                <span className="s2">2000.00</span>
                            </div>
                            <div className="btn">
                                <span>立即开通</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="equity">
                    <div className="title">开通后可享以下权益</div>
                    <div className="equitylist">
                        {
                            this.state.equitylist.map((item,index)=>{
                                return (
                                    <div className="item" key={index}>
                                        <div className="pic">
                                            <img src={item.pic} alt="" />
                                        </div>
                                        <div className="name">{item.name}</div>
                                        <div className="text">{item.equity}</div>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
                <div className="coupon">
                    <div className="title">全品优惠卷</div>
                    <div className="list">
                        {
                            this.state.coupones.map((item,index)=>{
                                return (
                                    <div className="item" key={index}>
                                        <img src={item.pic} alt="" />
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        );
    }
}

export default Vip;